import { Canvas, Chart, Interval, Legend, Axis } from "@antv/f2";
import { BOX6_NAME } from "../../constants/index";
import styles from "./boxs.css";
import { useEffect } from "react";

export function Box6({ hasTitle = true }) {
  const data = [
    { name: "CT", num: 8 },
    { name: "超声", num: 46 },
    { name: "化验", num: 60 },
    { name: "其他", num: 74 },
  ];
  useEffect(() => {
    const context = document.getElementById("Box6")?.getContext("2d");
    if (!context) return
    const { props } = (
      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
        <Chart
          data={data}
          coord={{
            type: "polar",
            transposed: true,
          }}
        >
          <Interval
            x="name"
            y="num"
            sizeRatio={0.3}
            style={{
              radius: [4, 4, 4, 4],
            }}
            color={{
              field: "name",
              range: ["#00acff", "#00fa7e", "#ffd600", "#ff8700"],
            }}
          />
          <Axis field="num" max={100} visible={false} />
          <Legend position="right" />
        </Chart>
      </Canvas>
    );
    const chart = new Canvas(props);
    chart.render();
  }, []);
  return (
    <div className={styles.box}>
      {hasTitle && <div className={styles.title}>{BOX6_NAME}</div>}
      <canvas className={styles.main} id="Box6"></canvas>
    </div>
  );
}
